import React, { Component } from 'react';
import { getRemengeshou, getGeshoufenlei } from '../../utils/api';
import './Remengeshou.css';

export default class Remengeshou extends Component {
	state = {
		// 歌手数组
		singerList: [],
		// 当前歌手类型id
		currentTypeId: 0,
		// 歌手类型数组
		types: []
	}
	componentDidMount () {
		window.scroll(0, 0);
		this.getGeshous();
	}
	// 获取歌手和歌手类型
	async getGeshous () {
		const types = await getGeshoufenlei();
		this.setState({
			types: types.data,
			currentTypeId: types.data[0].singertypeid
		}, function () {
			this.getRemengeshous(this.state.currentTypeId);
		})
	}
	async getRemengeshous (typeId) {
		const geshou = await getRemengeshou(typeId);
		this.setState({
			singerList: geshou.data
		})
	}
	// 切换歌手类型
	async changeType (typeId) {
		const geshou = await getRemengeshou(typeId);
		this.setState({
			singerList: geshou.data,
			currentTypeId: typeId
		})
	}
	render () {
		let { singerList, types, currentTypeId } = this.state;
		return (
			<div className='geshou main'>
				<div className='geshou_tag'>
					<div className='geshou_tag_f'>
						<h2>类型</h2>
						<ul>
							{types.map((item) =>
								(<li key={item.singertypeid} onClick={() => { this.changeType(item.singertypeid) }} className={currentTypeId === item.singertypeid ? 'active' : 'red'}>{item.singertype_name}</li>)
							)}
						</ul>
					</div>
				</div>
				<div className='geshou_content'>
					<ul className='geshou_box'>
						{singerList.map((item) => (
							<li key={item.singerid} onClick={() => this.props.history.push(`/index/search?keywords=${item.singer_name}&type=0`)}>
								<div className='img'>
									<img width='100%' height='100%' src={"http://localhost:3001/" + item.singer_pic_url} alt="" />
									<div className='des'>查看详情</div>
								</div>
								<p>{item.singer_name}</p>
							</li>
						))}
					</ul>
				</div>
			</div>
		)
	}
}
